<template>
	<view class="faq-page">
		<view class="faq-header">
			<view
				v-for="(item, index) in list"
				:key="index"
				class="faq-title"
				@click="change(item)"
			>
				<view class="title-content">
					<image class="icon-faq" :src="selectFaq === item.name ? item.iconSel : item.icon"></image>
					<view class="faq-name">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="faq-body">
			<scroll-view
				scroll-y="true"
				class="faq-scroll"
			>
				<view class="faq-list">
					<view
						v-for="(item, index) in selectQuestions"
						:key="index"
						class="faq-item"
						@click="chooseQuestion(index)"
					>
						<view class="faq-question">
							<view class="faq-text faq-left">
								<text>{{ item.q }}</text>
							</view>
						</view>
						<view v-if="index === selectQueIdx" class="faq-answer">
							<view class="faq-text faq-right">
								<text :decode="true">{{ item.a }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { faqList } from '@/config'

export default {
	computed: {
		selectQuestions () {
			return this.list.find(e => e.name === this.selectFaq)?.list || []
		}
	},
	data () {
		return {
			list: faqList,
			selectFaq: faqList[0].name,
			selectQueIdx: 0,
		}
	},
	methods: {
		change (item) {
			if (item.name === this.selectFaq) return
			this.selectFaq = item.name
			this.selectQueIdx = 0
		},
		chooseQuestion (index) {
			if (index === this.selectQueIdx) return
			this.selectQueIdx = index
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
